<template>
  <div>
    <div :class="[windowIsFocus === 1 ? 'window-focus' : 'window-blur', 'filter-index-table-header']">
      <div>
        <el-icon :size="20" style="margin-left: 10px;margin-right: 10px">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
            <path
              d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96c-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54c-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16s16 7.16 16 16s-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16s16 7.16 16 16s-7.16 16-16 16z"
              fill="currentColor"></path>
          </svg>
        </el-icon>
        <span>索引列表</span>
      </div>
      <el-button class="filter-search-button" @click="showInput = true">
        <span style="font-size:12px;">搜索一下</span>
        <el-icon :size="16">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
            <path d="M221.09 64a157.09 157.09 0 1 0 157.09 157.09A157.1 157.1 0 0 0 221.09 64z" fill="none"
              stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path>
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"
              d="M338.29 338.29L448 448"></path>
          </svg>
        </el-icon>
      </el-button>
      <div class="search-button-group">
        <el-button class="header-button" :disabled="indexMap.size === 0"
          @click="indexTableSelection = !indexTableSelection" type="primary" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
              <g fill="none">
                <path
                  d="M6.249 5.5a.75.75 0 0 0-.75.75v7.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-7.5a.75.75 0 0 0-.75-.75h-7.5zM5.25 3A2.25 2.25 0 0 0 3 5.25v9.5A2.25 2.25 0 0 0 5.25 17h9.499a2.25 2.25 0 0 0 2.25-2.25v-9.5A2.25 2.25 0 0 0 14.749 3H5.25zM4.5 5.25a.75.75 0 0 1 .75-.75h9.499a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75v-9.5z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button class="header-button" @click="handleBatchLink"
          :disabled="selectionSet.size === 0 || !indexTableSelection" type="success" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none">
                <path
                  d="M6.502 3.003a3.5 3.5 0 0 0-3.5 3.5v6a3.5 3.5 0 0 0 3.5 3.5H7v-2h-.497a1.5 1.5 0 0 1-1.5-1.5v-6a1.5 1.5 0 0 1 1.5-1.5h6a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5h-1.506v2h1.506a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 0 0-3.5-3.5h-6zM10 11.5a1.5 1.5 0 0 1 1.5-1.5h1.499V8H11.5A3.5 3.5 0 0 0 8 11.5v6a3.5 3.5 0 0 0 3.5 3.5h6a3.5 3.5 0 0 0 3.5-3.5v-6A3.5 3.5 0 0 0 17.5 8h-.495v2h.495a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5h-6a1.5 1.5 0 0 1-1.5-1.5v-6z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button class="header-button" @click="handleBatchUnLink"
          :disabled="selectionSet.size === 0 || !indexTableSelection" type="danger" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"></path>
                <path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"></path>
                <path d="M16 21v-2"></path>
                <path d="M19 16h2"></path>
                <path d="M3 8h2"></path>
                <path d="M8 3v2"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button class="header-button" type="success" :disabled="submitMap.size < 1" @click="handleSubmit" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41L9 16.17z" fill="currentColor"></path>
            </svg>
          </el-icon>
        </el-button>
      </div>
      <n-modal v-model:show="showInput">
        <n-card class="search-modal-card" content-style="padding: 0;" header-style="padding: 0;" :bordered="false"
          size="huge" role="dialog" aria-modal="true">
          <template #header>
            <!-- TODO 设置一个监听,自适应窗口宽度 -->
            <el-input class="search-index-header-search-input" v-model="searchInput" v-on:keyup.enter="handleSearch"
              placeholder="输入标签或标题 " size="small" />
          </template>
          <div @mousedown="$event.preventDefault(); $event.stopPropagation()">
            <div class="search-condition">
              <div class="search-condition-group">
                <span style="margin-right:10px;color:white;">类型:</span>
                <el-radio-group v-model="searchType" size="small" :disabled="isSearchTypeDisabled">
                  <el-radio-button :label="0">
                    <el-icon :size="12">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 1024 1024">
                        <path
                          d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494zM402 549c0 5.4 4.4 9.5 9.8 9.5h32.4c5.4 0 9.8-4.2 9.8-9.4c0-28.2 25.8-51.6 58-51.6s58 23.4 58 51.5c0 25.3-21 47.2-49.3 50.9c-19.3 2.8-34.5 20.3-34.7 40.1v32c0 5.5 4.5 10 10 10h32c5.5 0 10-4.5 10-10v-12.2c0-6 4-11.5 9.7-13.3c44.6-14.4 75-54 74.3-98.9c-.8-55.5-49.2-100.8-108.5-101.6c-61.4-.7-111.5 45.6-111.5 103zm78 195a32 32 0 1 0 64 0a32 32 0 1 0-64 0z"
                          fill="currentColor"></path>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                  <el-radio-button :label="1">
                    <el-icon :size="12">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 20 20">
                        <g fill="none">
                          <path
                            d="M8.765 7.076A.5.5 0 0 0 8 7.5v5.15a.5.5 0 0 0 .776.417l4-2.649a.5.5 0 0 0-.01-.84l-4-2.502zM4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h11a2.5 2.5 0 0 0 2.5-2.5v-9A2.5 2.5 0 0 0 15.5 3h-11zM3 5.5A1.5 1.5 0 0 1 4.5 4h11A1.5 1.5 0 0 1 17 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9z"
                            fill="currentColor"></path>
                        </g>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                  <el-radio-button :label="2">
                    <el-icon :size="12">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 640 512">
                        <path
                          d="M608 0H160a32 32 0 0 0-32 32v96h160V64h192v320h128a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zM232 103a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm352 208a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm-168 57H32a32 32 0 0 0-32 32v288a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32V192a32 32 0 0 0-32-32zM96 224a32 32 0 1 1-32 32a32 32 0 0 1 32-32zm288 224H64v-32l64-64l32 32l128-128l96 96z"
                          fill="currentColor"></path>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                  <el-radio-button :label="3">
                    <el-icon :size="12">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 24 24">
                        <path d="M22 18V2H6v16h16zm-11-6l2.03 2.71L16 11l4 5H8l3-4zM2 6v16h16v-2H4V6H2z"
                          fill="currentColor">
                        </path>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                  <el-radio-button :label="4">
                    <el-icon :size="12">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 20 20">
                        <g fill="none">
                          <path
                            d="M6.5 10a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3H6zm5.5 4h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5z"
                            fill="currentColor"></path>
                        </g>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                  <el-radio-button :label="5">
                    <el-icon :size="12">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 24 24">
                        <g fill="none">
                          <path
                            d="M7.75 11.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5zM7 15.25a.75.75 0 1 1 1.5 0a.75.75 0 0 1-1.5 0zm3-3a.75.75 0 0 1 .75-.75h3.054a.75.75 0 0 1 0 1.5H10.75a.75.75 0 0 1-.75-.75zm.75 2.25a.75.75 0 0 0 0 1.5h3.054a.75.75 0 0 0 0-1.5H10.75zM6.25 2A2.25 2.25 0 0 0 4 4.25v13a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25V8.869a2.25 2.25 0 0 0-.659-1.591l-4.619-4.619A2.25 2.25 0 0 0 10.632 2H6.25zM5.5 4.25a.75.75 0 0 1 .75-.75h4.254v3.248a2.25 2.25 0 0 0 2.25 2.25H16v8.252a.75.75 0 0 1-.75.75h-9a.75.75 0 0 1-.75-.75v-13zm6.504 2.498V4.562l2.935 2.936h-2.185a.75.75 0 0 1-.75-.75zM8.75 22a2.25 2.25 0 0 1-2.122-1.5h8.622a3.25 3.25 0 0 0 3.25-3.25V8.937l.84.84c.423.423.66.995.66 1.592v5.881A4.75 4.75 0 0 1 15.25 22h-6.5z"
                            fill="currentColor"></path>
                        </g>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                  <el-radio-button :label="6">
                    <el-icon :size="12">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 512 512">
                        <path
                          d="M83 384c-13-33-35-93.37-35-128C48 141.12 149.33 48 256 48s208 93.12 208 208c0 34.63-23 97-35 128"
                          fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                          stroke-width="32">
                        </path>
                        <path
                          d="M108.39 270.13l-13.69 8h0c-30.23 17.7-31.7 72.41-3.38 122.2s75.87 75.81 106.1 58.12h0l13.69-8a16.16 16.16 0 0 0 5.78-21.87L130 276a15.74 15.74 0 0 0-21.61-5.87z"
                          fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32">
                        </path>
                        <path
                          d="M403.61 270.13l13.69 8h0c30.23 17.69 31.74 72.4 3.38 122.19s-75.87 75.81-106.1 58.12h0l-13.69-8a16.16 16.16 0 0 1-5.78-21.87L382 276a15.74 15.74 0 0 1 21.61-5.87z"
                          fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32">
                        </path>
                      </svg>
                    </el-icon>
                  </el-radio-button>
                </el-radio-group>
              </div>
              <div class="search-condition-group">
                <span style="margin-right:10px;color:white;">算法:</span>
                <el-radio-group v-model="searchTextMode" size="small">
                  <el-radio-button :label="0">混合</el-radio-button>
                  <el-radio-button :label="1">直接</el-radio-button>
                </el-radio-group>
                &nbsp;
              </div>
            </div>
            <el-table class="search-disks" :data="dists"
              :row-class-name="row => row.rowIndex === 0 ? 'search-input-table-row-first' : ''"
              @selection-change=" checkDistSet = new Set($event.map(val => val.dist + ':\\'))"
              cell-class-name="search-input-table-cell" :show-header="false" style="width: 100%;margin-top: 6.3px"
              select-on-indeterminate>
              <el-table-column type="selection" width="30" />
              <el-table-column prop="text">
                <template #default="scope">
                  <div class="search-index-header-input-select-option">
                    <div class="search-index-header-input-select-option">
                      <el-icon>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                          viewBox="0 0 512 512">
                          <path
                            d="M409.43 389.87C362 410 305.4 421.05 256 421.05s-105.87-11.3-153.44-31.18S48 353.16 48 353.16v38.2c0 31.15 18 43.64 67.32 64.35C153.13 471.59 203.18 480 256 480s102.87-8.41 140.68-24.29C446 435 464 422.51 464 391.36v-38.2s-7.14 16.59-54.57 36.71z"
                            fill="currentColor"></path>
                          <path
                            d="M63.69 173.22c11.23 9.84 27.82 19.49 48 27.92c42.48 17.76 96.45 28.37 144.36 28.37s101.88-10.61 144.36-28.37c20.13-8.43 36.72-18.08 47.95-27.92c6.06-5.31 10.85-10.12 13.47-12.85a8 8 0 0 0 2.22-5.54v-26.16c-.84-28.79-24.71-54.41-67.21-72.14C358.83 40.71 308.84 32 256 32s-102.83 8.71-140.74 24.53C72.85 74.22 49 99.78 48.05 128.5v26.33a8 8 0 0 0 2.21 5.54c2.58 2.73 7.36 7.54 13.43 12.85z"
                            fill="currentColor"></path>
                          <path
                            d="M409.43 221.91C365 241 305.4 253.09 256 253.09s-108.87-12.27-153.43-31.18S48 185.2 48 185.2v47.36c.08 7.52 5.5 16.2 15.69 25.13c11.24 9.84 27.82 19.5 48 27.92C154.12 303.38 208.09 314 256 314s101.88-10.6 144.36-28.37c20.13-8.42 36.72-18.08 47.95-27.92c10.25-9 15.68-17.71 15.69-25.27V185.2s-10.13 17.62-54.57 36.71z"
                            fill="currentColor"></path>
                          <path
                            d="M409.43 306.38C362 326 305.4 337.56 256 337.56s-109.87-12.8-153.43-31.18S48 269.67 48 269.67v46.25c0 7.55 5.44 16.28 15.69 25.26c11.23 9.84 27.81 19.5 48 27.92c42.48 17.77 96.44 28.37 144.36 28.37s101.88-10.6 144.36-28.37c20.13-8.43 36.72-18.08 47.95-27.92c10.19-8.93 15.61-17.61 15.69-25.13v-46.38s-7.18 17.09-54.62 36.71z"
                            fill="currentColor"></path>
                        </svg>
                      </el-icon>
                      <span>&nbsp;磁盘{{ scope.row.dist }}&nbsp;(&nbsp;{{ scope.row.path
                      }}&nbsp;)</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </n-card>
      </n-modal>
    </div>
    <div class="lib-table-filter" :style="`height: ${mainHeight}px;width:${mainWidth}px;`">
      <template v-for="(item, index) in indexMap.values()" :key="index">
        <div
          :class="[item.link ? 'lib-table-filter-row-lock' : 'lib-table-filter-row-hover', 'lib-table-filter-row-box']">
          <div :class="[item.link ? 'lib-table-filter-row-lock' : 'lib-table-filter-row-hover', 'lib-table-filter-row']"
            v-on:dblclick="indexNameDetail(item)">
            <span class="lib-table-filter-row-main">
              <el-checkbox :disabled="item.disabled" v-show="indexTableSelection" size="small"
                @change="handleSelect($event, item.id)" />
              <n-ellipsis class="lib-table-filter-row-value" :line-clamp="1">{{ item.title }}</n-ellipsis>
            </span>
            <el-button :disabled="indexTableSelection || item.disabled" :type="item.link ? 'danger' : 'success'"
              @click=" handleIndexLink(item)" link>
              <el-icon v-show="!item.link" :size="24">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                  <g fill="none">
                    <path
                      d="M6.502 3.003a3.5 3.5 0 0 0-3.5 3.5v6a3.5 3.5 0 0 0 3.5 3.5H7v-2h-.497a1.5 1.5 0 0 1-1.5-1.5v-6a1.5 1.5 0 0 1 1.5-1.5h6a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5h-1.506v2h1.506a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 0 0-3.5-3.5h-6zM10 11.5a1.5 1.5 0 0 1 1.5-1.5h1.499V8H11.5A3.5 3.5 0 0 0 8 11.5v6a3.5 3.5 0 0 0 3.5 3.5h6a3.5 3.5 0 0 0 3.5-3.5v-6A3.5 3.5 0 0 0 17.5 8h-.495v2h.495a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5h-6a1.5 1.5 0 0 1-1.5-1.5v-6z"
                      fill="currentColor"></path>
                  </g>
                </svg>
              </el-icon>
              <el-icon v-show="item.link" :size="24">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                  <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"></path>
                    <path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"></path>
                    <path d="M16 21v-2"></path>
                    <path d="M19 16h2"></path>
                    <path d="M3 8h2"></path>
                    <path d="M8 3v2"></path>
                  </g>
                </svg>
              </el-icon>
            </el-button>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  beforeCreate() {
    window.electronAPI.windowBlur((_event, value) => {
      if (value === 0) this.windowIsFocus = 0
    })
    window.electronAPI.windowFocus((_event, value) => {
      if (value === 1) this.windowIsFocus = 1
    })
    window.onbeforeunload = () => {
      $MyLibWindowCommunication.close()
    }
    this.$nextTick(() => {
      window.addEventListener('resize', () => {
        this.mainHeight = document.body.offsetHeight - 34
        this.mainWidth = document.body.offsetWidth
      })
    })
  },
  created() {
    if ($UrlQuery.sub_id_list)
      this.getFilterParentSubindexId($UrlQuery.sub_id_list).then()
    if ($UrlQuery.type == 0)
      this.isSearchTypeDisabled = false
    else {
      this.isSearchTypeDisabled = true
      this.searchType = $UrlQuery.type
    }
  },
  beforeMount() {
    this.$nextTick(() => {
      this.mainHeight = document.body.offsetHeight - 34
      this.mainWidth = document.body.offsetWidth
    })
  },
  methods: {
    handleSelect(value, id) {
      if (value) {
        this.selectionSet.add(id)
      } else
        this.selectionSet.delete(id)
    },
    handleIndexLink(item) {
      if (item.link) {
        item.link = false
        this.submitMap.delete(item.id)
        const linkSet = this.idAssociationMap.get(item.id)
        if (linkSet) {
          for (const id of linkSet) {
            const associationMapindex = this.indexMap.get(id)
            if (associationMapindex) {
              associationMapindex.disabled = false
            }
          }
        }
      } else {
        item.link = true
        this.submitMap.set(item.id, item)
        const linkSet = this.idAssociationMap.get(item.id)
        if (linkSet) {
          for (const id of linkSet) {
            const associationMapindex = this.indexMap.get(id)
            if (associationMapindex) {
              associationMapindex.disabled = true
              this.selectionSet.delete(id)
            }
          }
        }
      }
    },
    indexNameDetail: indexNameDetail,
    async handleSubmit() {
      let ids = []
      let values = []
      for (const iterator of this.submitMap.entries()) {
        ids.push(iterator[0])
        delete iterator[1].link
        values.push(JSON.stringify(iterator[1]))
      }
      $MyLibWindowCommunication.sendToParentAndClose({ type: 'ids', values: values, ids: ids })
    },
    handleBatchLink() {
      for (const id of this.selectionSet) {
        const index = this.indexMap.get(id)
        index.link = true
        this.submitMap.set(id, index)
        const linkSet = this.idAssociationMap.get(id)
        if (linkSet) {
          for (const linkId of linkSet) {
            const associationMapindex = this.indexMap.get(linkId)
            if (associationMapindex) {
              associationMapindex.disabled = true
              this.selectionSet.delete(linkId)
            }
          }
        }
      }
      this.indexTableSelection = false
    },
    handleBatchUnLink() {
      for (const id of this.selectionSet) {
        const index = this.indexMap.get(id)
        index.link = false
        this.submitMap.delete(id)
        const linkSet = this.idAssociationMap.get(id)
        if (linkSet) {
          for (const linkId of linkSet) {
            const associationMapindex = this.indexMap.get(linkId)
            if (associationMapindex) {
              associationMapindex.disabled = false
            }
          }
        }
      }
      this.indexTableSelection = false
    },
    /* search--start */
    async handleSearch() {
      this.showInput = false
      const querySet = new Set(this.searchInput.split(' '))
      querySet.delete('')
      let result
      // 设置映射Map
      const iterator = this.indexMap.values()
      let item = iterator.next()
      while (item.done === false) {
        if (item.value.link) {
          this.idAssociationMap.get(item.value.id).forEach(id => this.filterIds.add(id))
          this.filterIds.add(item.value.id)
        } else {
          this.indexMap.delete(item.value.id)
          this.idAssociationMap.delete(item.value.id)
        }
        item = iterator.next()
      }
      try {
        if (this.checkDistSet.size > 0) {
          switch (this.searchTextMode) {
            case 0:
              result = await this.libMixed(this.checkDistSet, this.searchType, querySet)
              break
            case 1:
              result = await this.libIndex(this.checkDistSet, this.searchType, querySet)
              break
          }
        } else {
          switch (this.searchTextMode) {
            case 0:
              result = await this.mixed(this.searchType, querySet)
              break
            case 1:
              result = await this.index(this.searchType, querySet)
              break
          }
        }
      } catch (error) {
        console.log(error)
      }
      this.filterLink(result)
    },
    async mixed(type, query) {
      //匹配标签

      const tagIdArray = await $MyLibDbc.tag._BatchGetByIndex('state', [1], {
        map: val => val.id,
        filter: tag => {
          for (const str of query)
            return contain(tag.text, str)
        }
      })

      const indexIdByTagIdArray = tagIdArray.length > 0 ?
        await $MyLibDbc.index_tag_relationship._BatchGetByIndex('tagId', tagIdArray, {
          map: val => val.indexId,
          filter: val => !this.filterIds.has(val.indexId)
        })
        : new Array()

      let indexSetFilter
      const indexIdByTagSet = new Set(indexIdByTagIdArray)
      if (indexIdByTagSet.size > 0)
        if (this.filterIds.size > 0)
          indexSetFilter = index => {
            if (!indexIdByTagSet.has(index.id) && !this.filterIds.has(index.id))
              for (const str of query)
                return contain(index.title, str) ? true : contain(index.subtitle, str) ? true : contain(index.description, str) ? true : false
            else
              return false
          }
        else
          indexSetFilter = index => {
            if (!indexIdByTagSet.has(index.id))
              for (const str of query)
                return contain(index.title, str) ? true : contain(index.subtitle, str) ? true : contain(index.description, str) ? true : false
            else
              return false
          }

      else if (this.filterIds.size > 0)
        indexSetFilter = index => {
          if (!this.filterIds.has(index.id))
            for (const str of query)
              return contain(index.title, str) ? true : contain(index.subtitle, str) ? true : contain(index.description, str) ? true : false
          else
            return false
        }
      else
        indexSetFilter = index => {
          for (const str of query)
            return contain(index.title, str) ? true : contain(index.subtitle, str) ? true : contain(index.description, str) ? true : false
        }

      // 按索引搜索
      const indexArray = await $MyLibDbc.index._BatchGetByIndex(
        'stateType', [[1, type]],
        {
          map: val => { val.disabled = false; return val },
          filter: indexSetFilter
        }
      )

      //TODO取消状态筛选
      const idStateType = new Array()
      indexIdByTagSet.forEach(ids => ids.forEach(id => idStateType.push([id, 1, type])))

      // 按标签搜索
      const indexByTagArray = idStateType.length > 0 ?
        await $MyLibDbc.index._BatchGetByIndex(
          'idStateType', idStateType,
          {
            map: val => { val.disabled = false; return val },
            isUQ: true
          })
        : new Array()

      indexByTagArray.forEach(index => {
        indexArray.push(index)
      })

      return indexArray
    },
    async index(type, query) {
      const indexArray = await $MyLibDbc.index._BatchGetByIndex(
        'stateType', [[1, type]], {
        map: val => { val.disabled = false; return val },
        filter: index => {
          if (!this.filterIds.has(index.id))
            for (const str of query)
              return contain(index.title, str) ? true : contain(index.subtitle, str) ? true : contain(index.description, str) ? true : false
          else
            return false
        }
      }
      )

      return indexArray
    },
    async libMixed(lib, type, query) {
      //
    },
    async libIndex(lib, type, query) {
      //
    },
    /* search--end */
    /* filter--start */
    async getFilterParentSubindexId(ids) {

      const resultIds = this.filterIds
      const idSet = new Set()

      ids.forEach(id => resultIds.add(id))
      //获取父.祖
      while (ids.length > 0) {
        let pids = await $MyLibDbc.index_subindex_relationship._BatchGetByIndex(
          'subIndexId',
          [...new Set(ids)],
          { map: val => val.indexId }
        )

        pids.forEach(id => {
          resultIds.add(id)
          idSet.add(id)
        })
      }
      ids.forEach(id => idSet.add(id))

      //获取子孙
      while (idSet.size > 0) {
        let pids = await $MyLibDbc.index_subindex_relationship._BatchGetByIndex(
          'indexId',
          idSet,
          {
            map: val => val.subIndex
          }
        )
        //idSet.clear()
        pids.forEach(id => {
          resultIds.add(id)
          //idSet.add(id)
        })
      }
    },
    async filterLink(set) {
      for (const index of set) {
        const oldValue = this.indexMap.get(index.id)
        if (oldValue) {
          break
        } else {
          this.indexMap.set(index.id, index)
          const isridsBySubIndex = await $MyLibDbc.index_subindex_relationship.getByIndex("subIndexId", index.id)

          const linkIdSet = new Set()
          isridsBySubIndex.forEach(id => linkIdSet.add(id))

          while (isridsBySubIndex.length > 0) {
            const bisridsBySubIndex = await $MyLibDbc.index_subindex_relationship._BatchGetByIndex(
              'subIndexId',
              isridsBySubIndex
            )
            bisridsBySubIndex.forEach(id => linkIdSet.add(id))
          }

          const isridsByIndex = await $MyLibDbc.index_subindex_relationship.getByIndex("indexId", index.id)
          isridsByIndex.forEach(id => linkIdSet.add(id))

          while (isridsByIndex.length > 0) {
            const bisridsByIndex = await $MyLibDbc.index_subindex_relationship._BatchGetByIndex(
              'indexId',
              isridsByIndex
            )
            bisridsByIndex.forEach(id => linkIdSet.add(id))
          }

          this.idAssociationMap.set(index.id, linkIdSet)
        }

      }
      //console.log(this.indexMap)
    },
    indexNameDetail(item) {
      const val = []
      val.push('<div style="display: flex;flex-wrap: wrap;flex-direction: column;">')
      for (const key of Object.keys(item)) {
        const name = indexFieldName.get(key)
        if (name)
          val.push(`<p><strong>${name}</strong>:&nbsp;${item[key]}</p>`)
      }
      val.push('</div>')
      ElMessageBox.alert(
        val.join(''),
        // '详情',
        {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false,
          closeOnClickModal: true,
          showClose: false,
          draggable: true,
        }
      ).then(emptyFunction).catch(emptyFunction)
    }
    /* filter--end */
  },
  data() {
    const dist = { name: "R", machine: "\\\\MACHINE-005", root: "\\disk9" }
    const val1 =
    {
      dist: 'R',
      path: dist.machine + dist.root
    }
    const val2 =
    {
      dist: 'J',
      path: dist.machine + dist.root
    }
    const val3 =
    {
      dist: 'K',
      path: dist.machine + dist.root
    }
    const val4 =
    {
      dist: 'Z',
      path: dist.machine + dist.root
    }
    return {
      isSearchTypeDisabled: false,
      windowIsFocus: 1,
      dists: [val1, val2, val3, val4],
      submitMap: new Map(),

      /* search--start */
      checkDistSet: new Set(),
      showInput: false,
      searchInput: '',
      searchType: 0,
      searchTextMode: 0,
      /* search--end */
      /* filter--start */
      filterIds: new Set(),
      idAssociationMap: new Map(),
      /* filter--end */
      mainHeight: 0,
      mainWidth: 0,
      /* table */
      indexTableSelection: false,
      selectionSet: new Set(),
      indexMap: new Map()
      /* table */
    }
  }
}
</script>

<style>
html,
body,
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    text-align: center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.window-blur {
    /* 未选中颜色 */
    background-color: #323233;
}

.window-focus {
    /* 未选中颜色 */
    background-color: #3C3C3C;
}
.filter-index-table-header {
  height: 34px !important;
  width: 100%;
  display: flex;
  -webkit-app-region: drag;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.search-button-group {
  margin-right: 137px;
  display: flex;
}

.view-table-row {
  --el-table-tr-bg-color: #1E1E1E !important;
  --el-bg-color: #1E1E1E !important;
}

.header-table-row {
  --el-table-header-bg-color: #252526 !important;
}

.el-message-box__header {
  padding: 0px !important;
}

.el-message-box__btns {
  padding: 0px !important;
}

.header-button {
  margin: 0 !important;
}

.filter-search-button {
  width: 45% !important;
  height: 23.42px !important;
  -webkit-app-region: no-drag;
}

.search-modal-card {
  width: 62%;
  position: fixed;
  /* right: auto; */
  top: 6px;
  left: 0px;
  right: 0px;
  padding-right: 4.2px;
  padding-left: 4.2px;
  padding-bottom: 6px;
  background-color: #252526 !important;
}

.search-index-header-search-input {
  width: 100%;
}

.search-condition {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 6.3px;
}

.search-condition-group {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 3px;
  margin-left: 5px;
}

.search-disks .el-table {
  --el-table-row-hover-bg-color: #2A2D2E !important;
  --el-table-bg-color: #252526 !important;
  --el-table-tr-bg-color: #252526 !important;
  --el-table-expanded-cell-bg-color: #252526 !important;
}

.search-input-table-row-first {
  --el-table-tr-bg-color: #04395E;
}

.search-input-table-cell {
  height: 18.9px !important;
  padding: 0px !important;
  font-size: small;
}

.search-index-header-input-select-option {
  display: flex;
  align-items: center;
}


.lib-table-filter {
  overflow: auto;
  background-color: #1E1E1E;
}

.lib-table-filter-row {
  width: auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: #1E1E1E;
  cursor: pointer;
  border-bottom: 0.5px solid #252526;
}

.lib-table-filter-row-box {
  padding-right: 5px;
  padding-left: 5px;
}

.lib-table-filter-row-lock {
  background-color: #350104;
}

.lib-table-filter-row-value {
  margin-left: 10px;
}

.lib-table-filter-row-main {
  display: flex;
  align-items: center;
}

.lib-table-filter-row-hover:hover {
  background-color: #333333;
}
</style>
